<template>
    <h2 style="text-align: center;">房价列表</h2>
    <a href="/AddRoomPrice" class="btn btn-success" style="margin-right: 10px;">添加房价信息</a>
    <input type="button" value="导出房价信息" class="btn btn-success" @click="ExprotFile"  style="margin-right: 10px;"/>
    <input type="button" value="价格升序" class="btn btn-success" @click="OrderByPrice(true)" style="margin-right: 10px;">
    <input type="button" value="价格降序" class="btn btn-success" @click="OrderByPrice(false)">
    <table border="1" class="table table-bordered">
        <thead style="background-color: aquamarine;">
            <tr style="text-align: center;">
                <th>房价编号</th>
                <th>房型名称</th>
                <th>标准价</th>
                <th>收款方式</th>
                <th>早餐份数</th>
                <th>房间数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody style="text-align: center;">
            <tr v-for="item in Info">
                <td>{{ item.RoomPrice_ID }}</td>
                <td>{{ item.RoomType_Name }}</td>
                <td>￥{{ item.RoomPrice_Price .toFixed(2)}}</td>
                <td>{{ item.RoomPrice_PayType?"预订付费":"到店付费" }}</td>
                <td>{{ item.RoomPrice_BreakfastNum }}份</td>
                <td>{{ item.RoomPrice_Num }}间</td>
                <td>
                    <a @click="UpdRoomPrice(item.RoomPrice_ID)" class="btn btn-success">修改</a>
                </td>
            </tr>
        </tbody>
    </table>
    <span>
        数据共{{ PageInfo.zongtiao }}条，每页{{ PageInfo.size }}条，共{{ PageInfo.index }}/{{ PageInfo.zongpage }}页
    
        <a @click="FanYe('F')" class="btn btn-success" style="margin-right: 10px;">首页</a>
        <a @click="FanYe('U')" class="btn btn-success" style="margin-right: 10px;">上一页</a>
        <a @click="FanYe('N')" class="btn btn-success" style="margin-right: 10px;">下一页</a>
        <a @click="FanYe('E')" class="btn btn-success" style="margin-right: 40px;">尾页</a>

        <select v-model="PageInfo.size" @change="Takesize" style="margin-right: 20px;">
            <option :value="2">2条/页</option>
            <option :value="3">3条/页</option>
            <option :value="5">5条/页</option>
            <option :value="10">10条/页</option>
        </select>
        
        <input type="text" style="width: 60px;"  v-model="Nindex"/>
        <input type="button" value="跳转" @click="TakeIndex" />
   </span>
</template>


<script setup lang="ts">
    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import { useRouter } from 'vue-router';

    const router=useRouter();
    //显示响应式数据
    const Info=ref([{
        RoomPrice_ID: 0,
        RoomPrice_Price: 0,
        RoomPrice_PayType: true,
        RoomPrice_BreakfastNum: "",
        RoomPrice_Num: "",
        RoomType_Name: ""
    }])
    //分页响应式数据
    const PageInfo=ref({
        index:1,
        size:2,
        zongtiao:0,
        zongpage:0,
    })
    //跳转页
    const Nindex=ref("");
    const TakeIndex=()=>{
        var nindex=Nindex.value;
        if(nindex=="")
        {
            alert('请输入跳转页！');
            return;
        }
        //跳转页必须大于1
        if(Number(nindex)<1)
        {
            alert('跳转页必须大于1');
            Nindex.value="";
            return;
        }
        //跳转页必须小于总页数
        if(Number(nindex)>PageInfo.value.zongpage)
        {
            alert('跳转页必须小于总页数!');
            Nindex.value="";
            return;
        }
        //跳转页必须为数字
        if(isNaN(Number(nindex)))
        {
            alert('跳转页必须为数字!');
            Nindex.value="";
            return;
        }
        PageInfo.value.index=Number(nindex);
        ShowRoomPrice();//显示

    }
    //修改页容量
    const Takesize=()=>{
        ShowRoomPrice();//显示
        
    }
    //分页
    const FanYe=(chooes:string)=>{
        switch(chooes)
        {
            case"F":
                PageInfo.value.index=1;
            break;
            case"U":
                if(PageInfo.value.index>1)
                {
                    PageInfo.value.index--;
                }
                else
                {
                    alert('当前已经是第一页！');
                    return;
                }
            break;
            case"N":
                if(PageInfo.value.index<PageInfo.value.zongpage)
                {
                    PageInfo.value.index++;
                }
                else
                {
                    alert('当前已经是最后一页！');
                    return;
                }
            break;
            case"E":
                PageInfo.value.index=PageInfo.value.zongpage;
            break;
        }
        ShowRoomPrice();//显示
    }
    onMounted(()=>{
        ShowRoomPrice();//显示
        GetPrice();//显示
    })
    //显示
    const ShowRoomPrice=()=>{
        axios.get("https://localhost:44380/api/RoomPrice/ShowRoomPrice",
            {
                params:{
                    index:PageInfo.value.index,
                    size:PageInfo.value.size,
                }
            }
        )
        .then(res=>{
            Info.value=res.data.Plist,
            PageInfo.value.zongpage=res.data.ZongPage,
            PageInfo.value.zongtiao=res.data.ZongTiao
        })
    }
    const UpdRoomPrice=(RoomPrice_ID:number)=>{
        router.push({
            name:"UpdRoomPrice",
            params:{
                id:RoomPrice_ID
            }
        })
    }
    //导出
    const ExprotFile=()=>{
        axios.post("https://localhost:44380/api/RoomPrice/ExprotFile?FPath="+"E://桌面/月考复习/第七套/RoomPriceInfo.xlsx")
        .then(res=>{
            if(res.data>0)
            {
                alert('房价信息导出成功');
            }
            else
            {
                alert('房价信息导出失败');
            }
        })
    }
    //升降序
    const sort=ref({sort:true});
    const GetPrice=()=>{
        axios.get("https://localhost:44380/api/RoomPrice/GetPrice",
            {
                params:{
                    sort:sort.value.sort
                }
            }
        )
        .then(res=>{
            Info.value=res.data;
        })
    }
    //升降排序
    const OrderByPrice=(val:any)=>{
        sort.value.sort=val;
        GetPrice();
    }
</script>